﻿using System;
using System.Collections.Generic;

namespace WUDI.ECharts.Series.Custom
{
	public class Custom
	{

		public String type { get; set; } = "custom";

		/// <summary>
		/// string
		/// 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
		/// </summary>
		public String id { get; set; }

		/// <summary>
		/// string
		/// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
		/// </summary>
		public String name { get; set; }

		/// <summary>
		/// boolean
		/// 是否启用图例 hover 时的联动高亮。
		/// </summary>
		public Boolean legendHoverLink { get; set; } = true;

		/// <summary>
		/// string
		/// 该系列使用的坐标系，可选：
		/// null 或者 'none'
		///   无坐标系。
		/// 'cartesian2d'
		///   使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
		/// 'polar'
		///   使用极坐标系，通过 polarIndex 指定相应的极坐标组件
		/// 'geo'
		///   使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
		/// 'none'
		///   不使用坐标系。
		/// </summary>
		public GraphCoordinateSystem coordinateSystem { get; set; } = GraphCoordinateSystem.cartesian2d;

		/// <summary>
		/// number
		/// 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
		/// </summary>
		public int xAxisIndex { get; set; } = 0;

		/// <summary>
		/// number
		/// 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
		/// </summary>
		public int yAxisIndex { get; set; } = 0;

		/// <summary>
		/// number
		/// 使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。
		/// </summary>
		public int polarIndex { get; set; } = 0;

		/// <summary>
		/// number
		/// 使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。
		/// </summary>
		public int geoIndex { get; set; } = 0;

		/// <summary>
		/// number
		/// 使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。
		/// </summary>
		public int calendarIndex { get; set; } = 0;

		/// <summary>
		/// Function
		/// custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem。例如：
		/// var option = {
		///     ...,
		///     series: [{
		///         type: 'custom',
		///         renderItem: function (params, api) {
		///             var categoryIndex = api.value(0);
		///             var start = api.coord([api.value(1), categoryIndex]);
		///             var end = api.coord([api.value(2), categoryIndex]);
		///             var height = api.size([0, 1])[1] * 0.6;
		///             var rectShape = echarts.graphic.clipRectByRect({
		///                 x: start[0],
		///                 y: start[1] - height / 2,
		///                 width: end[0] - start[0],
		///                 height: height
		///             }, {
		///                 x: params.coordSys.x,
		///                 y: params.coordSys.y,
		///                 width: params.coordSys.width,
		///                 height: params.coordSys.height
		///             });
		///             return rectShape && {
		///                 type: 'rect',
		///                 shape: rectShape,
		///                 style: api.style()
		///             };
		///         },
		///         data: data
		///     }]
		/// }
		/// 对于 data 中的每个数据项（为方便描述，这里称为 dataItem)，会调用此 renderItem 函数。
		/// renderItem 函数提供了两个参数：
		/// params：包含了当前数据信息和坐标系的信息。
		/// api：是一些开发者可调用的方法集合。
		/// renderItem 函数须返回根据此 dataItem 绘制出的图形元素的定义信息，参见 renderItem.return。
		/// 一般来说，renderItem 函数的主要逻辑，是将 dataItem 里的值映射到坐标系上的图形元素。这一般需要用到 renderItem.arguments.api 中的两个函数：
		/// api.value(...)，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。
		/// api.coord(...)，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。
		/// 有时候还需要用到 api.size(...) 函数，表示得到坐标系上一段数值范围对应的长度。
		/// 返回值中样式的设置可以使用 api.style(...) 函数，他能得到 series.itemStyle 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：api.style({fill: 'green', stroke: 'yellow'})。
		/// </summary>
		public String renderItem { get; set; }

		/// <summary>
		/// Object
		/// 图形样式。
		/// </summary>
		public WUDI.ECharts.Series.Custom.ItemStyle.ItemStyle itemStyle { get; set; }

		/// <summary>
		/// Object
		/// 高亮图形样式
		/// </summary>
		public WUDI.ECharts.Series.Custom.Emphasis.Emphasis emphasis { get; set; }

		/// <summary>
		/// Array
		/// </summary>
		public List<object> dimensions { get; set; }

		/// <summary>
		/// Object
		/// 可以定义 data 的哪个维度被编码成什么。比如：
		/// option = {
		///     dataset: {
		///         source: [
		///             // 每一列称为一个『维度』。
		///             // 这里分别是维度 0、1、2、3、4。
		///             [12, 44, 55, 66, 2],
		///             [23, 6, 16, 23, 1],
		///             ...
		///         ]
		///     },
		///     series: {
		///         type: 'xxx',
		///         encode: {
		///             x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。
		///             y: 2,              // 表示维度 2 映射到 y 轴。
		///             tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
		///         }
		///     }
		/// }
		/// 当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，例如：
		/// series: {
		///     type: 'xxx',
		///     dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
		///     encode: {
		///         x: 'date',
		///         y: ['open', 'close', 'highest', 'lowest']
		///     }
		/// }
		/// encode 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 'x', 'y', 'tooltip' 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。
		/// 下面是 encode 支持的属性：
		/// // 在任何坐标系和系列中，都支持：
		/// encode: {
		///     // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
		///     tooltip: ['product', 'score']
		///     // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
		///     seriesName: [1, 3],
		///     // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
		///     itemId: 2,
		///     // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
		///     itemName: 3
		/// }
		/// // 直角坐标系（grid/cartesian）特有的属性：
		/// encode: {
		///     // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
		///     x: [1, 5, 'score'],
		///     // 把“维度0”映射到 Y 轴。
		///     y: 0
		/// }
		/// // 单轴（singleAxis）特有的属性：
		/// encode: {
		///     single: 3
		/// }
		/// // 极坐标系（polar）特有的属性：
		/// encode: {
		///     radius: 3,
		///     angle: 2
		/// }
		/// // 地理坐标系（geo）特有的属性：
		/// encode: {
		///     lng: 3,
		///     lat: 2
		/// }
		/// // 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
		/// encode: {
		///     value: 3
		/// }
		/// 这是个更丰富的 encode 的示例：
		/// 特殊地，在 自定义系列（custom series） 中，encode 中轴可以不指定或设置为 null/undefined，从而使系列免于受这个轴控制，也就是说，轴的范围（extent）不会受此系列数值的影响，轴被 dataZoom 控制时也不会过滤掉这个系列：
		/// var option = {
		///     xAxis: {},
		///     yAxis: {},
		///     dataZoom: [{
		///         xAxisIndex: 0
		///     }, {
		///         yAxisIndex: 0
		///     }],
		///     series: {
		///         type: 'custom',
		///         renderItem: function (params, api) {
		///             return {
		///                 type: 'circle',
		///                 shape: {
		///                     cx: 100, // x 位置永远为 100
		///                     cy: api.coord([0, api.value(0)])[1],
		///                     r: 30
		///                 },
		///                 style: {
		///                     fill: 'blue'
		///                 }
		///             };
		///         },
		///         encode: {
		///             // 这样这个系列就不会被 x 轴以及 x
		///             // 轴上的 dataZoom 控制了。
		///             x: -1,
		///             y: 1
		///         },
		///         data: [ ... ]
		///     }
		/// };
		/// </summary>
		public dynamic encode { get; set; }

		/// <summary>
		/// string
		/// 当使用 dataset 时，seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上，也就是说，系列“排布”到 dataset 的行还是列上。可取值：
		/// 'column'：默认，dataset 的列对应于系列，从而 dataset 中每一列是一个维度（dimension）。
		/// 'row'：dataset 的行对应于系列，从而 dataset 中每一行是一个维度（dimension）。
		/// 参见这个 示例
		/// </summary>
		public String seriesLayoutBy { get; set; } = "column";

		/// <summary>
		/// number
		/// 如果 series.data 没有指定，并且 dataset 存在，那么就会使用 dataset。datasetIndex 指定本系列使用那个 dataset。
		/// </summary>
		public int datasetIndex { get; set; } = 0;

		/// <summary>
		/// Array
		/// </summary>
		public List<object> data { get; set; }

		/// <summary>
		/// boolean
		/// 从 4.4.0 开始支持
		/// 是否裁剪超出坐标系部分的图形，具体裁剪效果根据系列决定：
		/// 散点图：忽略中心点超出坐标系的图形，但是不裁剪单个图形
		/// 柱状图：裁掉所有超出坐标系的部分，但是依然保留柱子的宽度
		/// 折线图：裁掉所有超出坐标系的折线部分，拐点图形的逻辑按照散点图处理
		/// 路径图：裁掉所有超出坐标系的部分
		/// 自定义系列：裁掉所有超出坐标系的部分
		/// 除了自定义系列，其它系列的默认值都为 true，及开启裁剪，如果你觉得不想要裁剪的话，可以设置成 false 关闭。
		/// </summary>
		public Boolean clip { get; set; } = false;

		/// <summary>
		/// number
		/// 自定义图所有图形的 zlevel 值。
		/// zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
		/// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
		/// </summary>
		public int zlevel { get; set; } = 0;

		/// <summary>
		/// number
		/// 自定义图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
		/// z相比zlevel优先级更低，而且不会创建新的 Canvas。
		/// </summary>
		public int z { get; set; } = 2;

		/// <summary>
		/// boolean
		/// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
		/// </summary>
		public Boolean silent { get; set; } = false;

		/// <summary>
		/// boolean
		/// 是否开启动画。
		/// </summary>
		public Boolean animation { get; set; } = true;

		/// <summary>
		/// number
		/// 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
		/// </summary>
		public int animationThreshold { get; set; } = 2000;

		/// <summary>
		/// number
		/// 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
		/// animationDuration: function (idx) {
		///     // 越往后的数据延迟越大
		///     return idx * 100;
		/// }
		/// </summary>
		public int animationDuration { get; set; } = 1000;

		/// <summary>
		/// string
		/// 初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。
		/// </summary>
		public String animationEasing { get; set; } = "cubicOut";

		/// <summary>
		/// number,Function
		/// 初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
		/// 如下示例：
		/// animationDelay: function (idx) {
		///     // 越往后的数据延迟越大
		///     return idx * 100;
		/// }
		/// 也可以看该示例
		/// </summary>
		public dynamic animationDelay { get; set; } = 0;

		/// <summary>
		/// number,Function
		/// 数据更新动画的时长。
		/// 支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果：
		/// animationDurationUpdate: function (idx) {
		///     // 越往后的数据延迟越大
		///     return idx * 100;
		/// }
		/// </summary>
		public dynamic animationDurationUpdate { get; set; } = 300;

		/// <summary>
		/// string
		/// 数据更新动画的缓动效果。
		/// </summary>
		public String animationEasingUpdate { get; set; } = "cubicOut";

		/// <summary>
		/// number,Function
		/// 数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
		/// 如下示例：
		/// animationDelayUpdate: function (idx) {
		///     // 越往后的数据延迟越大
		///     return idx * 100;
		/// }
		/// 也可以看该示例
		/// </summary>
		public dynamic animationDelayUpdate { get; set; } = 0;

		/// <summary>
		/// *
		/// 本系列特定的 tooltip 设定。
		/// </summary>
		public WUDI.ECharts.Series.Custom.Tooltip.Tooltip tooltip { get; set; }

	}
}
